<!DOCTYPE html>
<html>
<head>
    <title>订单配件管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1 class="page-title">订单配件管理</h1>
        <div class="nav-menu">
            <a href="{{ url_for('orders') }}" class="nav-item">返回订单列表</a>
            <a href="#" class="nav-item add-btn" onclick="showModal()">添加配件</a>
        </div>
        
        <!-- 订单信息 -->
        <div class="section">
            <h2 class="section-title">订单信息</h2>
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">订单号：</span>
                    <span>{{ order.order_number }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">客户：</span>
                    <span>{{ order.customer.name }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">车牌号：</span>
                    <span>{{ order.vehicle.plate_number }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">总金额：</span>
                    <span>{{ order.total_amount }}</span>
                </div>
            </div>
        </div>
        
        <!-- 配件列表 -->
        <div class="section">
            <h2 class="section-title">配件列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>配件编号</th>
                        <th>配件名称</th>
                        <th>单位</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>金额</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in order.items %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ item.part.part_number }}</td>
                        <td>{{ item.part.name }}</td>
                        <td>{{ item.part.unit }}</td>
                        <td>{{ item.quantity }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.amount }}</td>
                        <td>
                            <a href="{{ url_for('delete_order_item', item_id=item.id) }}" 
                               class="action-btn delete-btn" 
                               onclick="return confirm('确定要删除这个配件吗？')">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 添加配件模态框 -->
        <div id="addModal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="hideModal()">&times;</span>
                <h2>添加配件</h2>
                <form action="{{ url_for('add_order_item') }}" method="POST">
                    <input type="hidden" name="order_id" value="{{ order.id }}">
                    <div class="form-group">
                        <label for="part">选择配件</label>
                        <select id="part" name="part_id" required onchange="updatePrice()">
                            <option value="">请选择配件</option>
                            {% for part in parts %}
                            <option value="{{ part.id }}" data-price="{{ part.price }}">
                                {{ part.name }} ({{ part.part_number }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="quantity">数量</label>
                        <input type="number" id="quantity" name="quantity" required min="1" value="1" onchange="updateAmount()">
                    </div>
                    <div class="form-group">
                        <label>单价</label>
                        <span id="price">0.00</span>
                    </div>
                    <div class="form-group">
                        <label>金额</label>
                        <span id="amount">0.00</span>
                    </div>
                    <button type="submit" class="nav-item add-btn">添加</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('addModal').style.display = 'block';
        }
        
        function hideModal() {
            document.getElementById('addModal').style.display = 'none';
        }
        
        function updatePrice() {
            const select = document.getElementById('part');
            const option = select.options[select.selectedIndex];
            const price = option.dataset.price || 0;
            document.getElementById('price').textContent = price;
            updateAmount();
        }
        
        function updateAmount() {
            const price = parseFloat(document.getElementById('price').textContent);
            const quantity = parseInt(document.getElementById('quantity').value) || 0;
            const amount = price * quantity;
            document.getElementById('amount').textContent = amount.toFixed(2);
        }
        
        window.onclick = function(event) {
            var modal = document.getElementById('addModal');
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html> 